import { Panel, Icon as CustomIcon } from 'comps/common';
import { Modal, Form, Radio, Input, Button, Row, Col, Select } from 'antd';
import * as React from 'react';

const FormItem = Form.Item;
const { Group: RadioGroup, Button: RadioButton } = Radio;
const Option = Select.Option;

class ImportForm extends React.Component {
  handleSubmit(evt) {
    evt.preventDefault();
    const { validateFields, getFieldValue } = this.props.form;
    const needValidateFields = ['key', 'type'];
    switch (getFieldValue('type')) {
      case 'LINNER':
      case 'MAVEN':
        needValidateFields.push('gitUrl', 'gitBranch');
        break;
      case 'MAVEN_SUB':
        needValidateFields.push('parentId', 'path');
        break;
      case 'DOCKER_IMAGE':
        needValidateFields.push('imageTag');
        break;
      default:
    }
    validateFields(needValidateFields, (error, values) => {
      if (!!error) {
        return;
      }
      let url;
      switch (values.type) {
        case 'LINNER':
        case 'MAVEN':
          url = `${values.gitUrl}:${values.gitBranch}`;
          break;
        case 'MAVEN_SUB':
          url = values.path;
          break;
        case 'DOCKER_IMAGE':
          url = values.imageTag;
          break;
        default:
      }
      const parentId = values.type === 'MAVEN_SUB' ? values.parentId : undefined;
      const params = {
        key: values.key,
        type: values.type,
        url,
        parentId
      };
      this.props.onUnitImport(params)
        .then(() => {
          Modal.success({
            title: '导入运行单元成功',
            onOk: () => {
              this.props.popLayer();
            }
          });
        });
    });
  }

  render() {
    const formLayout = {
      labelCol: { span: 7 },
      wrapperCol: { span: 12 }
    };
    const { getFieldProps, getFieldValue } = this.props.form;

    const keyField = getFieldProps('key', {
      rules: [
        { required: true, message: '请输入 unit key' },
        { pattern: /^[a-zA-Z][a-zA-Z0-9\-]*$/, message: '只允许字母数字和横线，且首字符必须是字母' }
      ]
    });
    const typeField = getFieldProps('type', {
      initialValue: 'LINNER',
      rules: [
        { required: true, message: '请选择导入的工程类型' }
      ]
    });

    const gitUrlField = getFieldProps('gitUrl', {
      rules: [
        { required: true, message: '请填写 Git 仓库地址' }
      ]
    });
    const gitBranchField = getFieldProps('gitBranch', {
      rules: [
        { required: true, message: '请填写 Git 分支名称' }
      ]
    });
    const parentIdField = getFieldProps('parentId', {
      rules: [
        { type: 'integer', required: true, message: '请选择一个父 unit' }
      ]
    });
    const pathField = getFieldProps('path', {
      rules: [
        { required: true, message: '请填写子工程相对路径' }
      ]
    });
    const imageTagField = getFieldProps('imageTag', {
      rules: [
        { required: true, message: '请填写 Docker Image tag' }
      ]
    });

    const typeValue = getFieldValue('type');
    let formItems;
    switch (typeValue) {
      case 'LINNER':
      case 'MAVEN':
        formItems = [
          <FormItem required key='gitUrl' label='Git repository url：' {...formLayout}>
            <Input type='text' {...gitUrlField}/>
          </FormItem>,
          <FormItem required key='gitBranch' label='分支：' {...formLayout}>
            <Input type='text' style={{ width: '200px' }} {...gitBranchField}/>
          </FormItem>
        ];
        break;
      case 'MAVEN_SUB':
        formItems = [
          <FormItem required key='parentUnit' label='父工程：' {...formLayout}>
            <Select style={{ width: '200px' }} {...parentIdField}>
              {this.props.mavenUnits.map(mavenUnit => {
                return (
                  <Option key={mavenUnit.id} value={mavenUnit.id}>{mavenUnit.key}</Option>
                );
              })}
            </Select>
          </FormItem>,
          <FormItem required key='path' label='路径：' {...formLayout}>
            <Input type='text' style={{ width: '200px' }} {...pathField}/>
          </FormItem>
        ];
        break;
      case 'DOCKER_IMAGE':
        formItems = (
          <FormItem required label='Image tag：' {...formLayout}>
            <Input type='text' {...imageTagField}/>
          </FormItem>
        );
        break;
      default:
    }
    return (
      <Form horizontal onSubmit={::this.handleSubmit} form={this.props.form}>
        <FormItem required label='KEY：' {...formLayout}>
          <Input type='text' {...keyField} placeholder='只允许字母数字和横线，且首字符必须是字母'/>
        </FormItem>
        <FormItem required label='类型：' {...formLayout}>
          <RadioGroup {...typeField}>
            <RadioButton value='LINNER'><span className='color-linner'><CustomIcon type='icon_box'/> Linner 工程</span></RadioButton>
            <RadioButton value='MAVEN'><span className='color-maven'><CustomIcon type='maven'/> Maven 工程</span></RadioButton>
            <RadioButton value='MAVEN_SUB'><span className='color-maven'><CustomIcon type='maven'/> Maven 子工程</span></RadioButton>
            <RadioButton value='DOCKER_IMAGE'><span className='color-docker'><CustomIcon type='docker'/> Docker Image</span></RadioButton>
          </RadioGroup>
        </FormItem>
        {formItems}
        <Row>
          <Col span='12' offset='7'><Button htmlType='submit' type='primary' loading={this.props.unitImportFetching}>导入</Button></Col>
        </Row>
      </Form>
    );
  }
}
ImportForm = Form.create()(ImportForm);

class RunnableUnitImport extends React.Component {
  render() {
    return (
      <Panel title='导入运行单元' className='runnable-unit-import'>
        <ImportForm {...this.props}/>
      </Panel>
    );
  }
}

export default RunnableUnitImport;
